<template>
  <div class="d_picker">
    <van-field
      is-link
      readonly
      name="picker"
      label="选择器"
      placeholder="请选择"
      v-bind="$attrs"
      input-align="right"
      @click="showPicker = true"
      :model-value="displayValue"
    />

    <van-popup v-model:show="showPicker" position="bottom">
      <van-date-picker
        title="选择日期"
        :min-date="minDate"
        :max-date="maxDate"
        :columns-order="['year', 'month', 'day']"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

// 接收 modelValue prop
const props = defineProps({
  list: { type: Array, default: () => [] },
  modelValue: { type: [String, Number], default: "" },
});

const minDate = ref(new Date(2000, 0, 1));
const maxDate = ref(new Date());

const emit = defineEmits(["update:modelValue"]);
const showPicker = ref(false);

// 用于显示的格式化值
const displayValue = computed(() => {
  return props.modelValue || "";
});

const onConfirm = ({ selectedValues }) => {
  const value = selectedValues.join("-");
  emit("update:modelValue", value);
  showPicker.value = false;
};
</script>

<style lang="scss" scoped>
:deep(.van-form .van-field__error-message) {
  text-align: right;
}
</style>